<template>
  <el-tabs type='border-card' id='__div_tab'>
    <template v-for="(opt,index) in options">
      <el-tab-pane :label="opt.title">
        <comp
          :is="'comp-expand-tabs-'+opt.type"
          :row="row"
          :options="opt.options"
          ></comp>
      </el-tab-pane>
    </template>
  </el-tabs>
</template>
<script>
  define(['vue'],function(vue){
    return vue.component('comp-expand-tabs',{
      template: template,
      components : {
        'comp-expand-tabs-form' : resolve=>require(['_vue!pathComponent/comp-expand-tabs-form'], resolve),        
        'comp-expand-tabs-table' : resolve=>require(['_vue!pathComponent/comp-expand-tabs-table'], resolve),      
      },
      props:['row','options'],
      data:function(){
        return {
          // colmd : 'layui-col-md' + this.cardWidthCol,
          // colxs : ' layui-col-xs12',
          // pullCenter : 'card-pull-center'
        }
      },
      mounted: function() {
        // dump('comp-expand-tabs mounted',document.body.clientWidth);
        //不进行设置的话,在列多横向滚动的时候,详细区域会超出屏幕宽度,看不完整
        document.getElementById('__div_tab').style.width=(document.body.clientWidth-120) + 'px';
      }
    });
  });
</script>

<style>
</style>